<template>
  <div class="center-setting pb120 pt40 publicServe">
    <TitleCard
      :title="title"
      :showMore="false"
      :loading="loading"
      :isEmpty="isEmpty"
      :isSwitch="false"
      :type="'threeCard'"
    >
      <template slot="rightOperation">
        <div class="btn-wrap">
          <a-button class="btn-item" @click="contact">联系客服</a-button>
        </div>
      </template>
      <Tip
        :tip="tip"
        bcgColor="#FFF4E0"
        :icon="false"
        fontColor="#F83F41"
        class="record-tip"
        justify="center"
      ></Tip>
      <div class="personAuth-from mt20">
        <a-form-model
          ref="ruleForm"
          :model="params"
          :rules="rules"
          class="joinForm"
          v-bind="layout"
        >
          <a-row :gutter="24">
            <!-- <a-col :span="12">
              <a-form-model-item
                ref="enpName"
                label="企业名称"
                prop="enpName"
                :labelCol="{ span: 4, offset: 0 }"
                :wrapperCol="{ span: 16 }"
                style="padding-right: 0"
              >
                <a-input
                  placeholder="请输入企业名称"
                  v-model="params.enpName"
                  @blur="
                    () => {
                      $refs.userName.onFieldBlur()
                    }
                  "
                /> </a-form-model-item
            ></a-col> -->
            <a-col :span="12">
              <a-form-model-item
                ref="enpNo"
                label="统一社会信用代码(营业执照号码)"
                prop="enpNo"
                :labelCol="{ span: 11 }"
                :wrapperCol="{ span: 13 }"
              >
                <a-input
                  placeholder=""
                  v-model="params.enpNo"
                  @blur="
                    () => {
                      $refs.enpNo.onFieldBlur()
                    }
                  "
                /> </a-form-model-item
            ></a-col>
          </a-row>
          <!-- <a-form-model-item
            ref="enpType"
            label="企业类型"
            prop="enpType"
            :wrapper-col="typeWrapper"
          >
            <a-radio-group
              name="radioGroup"
              :default-value="'1'"
              v-model="params.enpType"
            >
              <a-radio :value="'0'"> 国企/事业单位 </a-radio>
              <a-radio :value="'1'"> 外企/合资企业 </a-radio>
              <a-radio :value="'2'"> 民营企业 </a-radio>
              <a-radio :value="'3'"> 其他 </a-radio>
            </a-radio-group>
          </a-form-model-item> -->
          <a-form-model-item ref="enpUrl" label="官网地址" prop="enpUrl">
            <a-input
              placeholder="例：http://www.baidu.com"
              v-model="params.enpUrl"
              @blur="
                () => {
                  $refs.enpUrl.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="enpDate" label="成立日期" prop="enpDate">
            <a-date-picker
              placeholder="请选择成立日期"
              @change="timeChange"
              @blur="
                () => {
                  $refs.enpDate.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item
            ref="adress"
            label="所在区域"
            prop="adress"
            :wrapper-col="addressWrapper"
          >
            <div class="addres">
              <a-cascader
                :options="cityList"
                placeholder="请选择所在的区域"
                class="mr20"
                @change="onChange"
                v-model="params.adress"
              />
              <a-input
                placeholder="请输入详细地址"
                v-model="params.enpAddress"
                @blur="
                  () => {
                    $refs.adress.onFieldBlur()
                  }
                "
              />
            </div>
          </a-form-model-item>
          <a-form-model-item ref="enpPhone" label="联系电话" prop="enpPhone">
            <a-input
              placeholder="请输入联系电话"
              v-model="params.enpPhone"
              @blur="
                () => {
                  $refs.enpPhone.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item
            ref="enpContact"
            label="联系人姓名"
            prop="enpContact"
          >
            <a-input
              placeholder="请输入联系姓名"
              v-model="params.enpContact"
              @blur="
                () => {
                  $refs.enpContact.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="enpEmail" label="邮箱" prop="enpEmail">
            <a-input
              placeholder="例：adsoft@ourchem.com"
              v-model="params.enpEmail"
              :disabled="true"
              @blur="
                () => {
                  $refs.enpEmail.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item
            ref="enpDesc"
            label="企业描述"
            prop="enpDesc"
            :labelCol="{ span: 2, offset: 0 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-textarea
              placeholder="请输入内容"
              :rows="4"
              v-model="params.enpDesc"
            />
          </a-form-model-item>
          <a-form-model-item ref="logo" label="企业LOGO" prop="logo">
            <a-upload
              name="file"
              :multiple="true"
              :action="url"
              :headers="headers"
              @change="uploadHandleChange"
              v-model="params.logo"
              :file-list="logoFileList"
              :beforeUpload="handlerBeforeUpload"
            >
              <a-button class="mr20">
                <a-icon type="upload" /> 点击上传
              </a-button>
              <span>在展示企业名片时使用</span>
            </a-upload>
          </a-form-model-item>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item
                ref="enpPic"
                label="营业执照"
                prop="enpPic"
                v-model="params.enpPic"
                :labelCol="{ span: 4, offset: 0 }"
                :wrapperCol="{ span: 16 }"
                style="padding-right: 0"
              >
                <a-upload-dragger
                  class="upload-dragger"
                  name="file"
                  :multiple="true"
                  :action="url"
                  :headers="headers"
                  :file-list="fileList"
                  :beforeUpload="draggerBeforeUpload"
                  @change="draggerHandleChange"
                >
                  <p class="ant-upload-drag-icon">
                    <a-icon type="inbox" />
                  </p>
                  <p class="ant-upload-text">上传营业执照</p>
                  <p class="ant-upload-hint">
                    所有资质证明文件需加盖公章的复印件活彩色扫描件，支持JPG/PNG格式，文件不超过2M
                  </p>
                </a-upload-dragger>
              </a-form-model-item></a-col
            >
            <a-col :span="12">
              <a-form-model-item
                ref="userName"
                label="示例"
                prop="eamil"
                :labelCol="{ span: 4 }"
                :wrapperCol="{ span: 13 }"
              >
                <img
                  src="../../../assets/images/营业执照示例图片.png"
                  alt=""
                  class="from-img"
                /> </a-form-model-item
            ></a-col>
          </a-row>
        </a-form-model>
        <div class="fromBtnClass">
          <a-button
            type="primary"
            class="fromBtnClass-Btn"
            @click="confirmClick"
            >提交</a-button
          >
        </div>
      </div>
    </TitleCard>
  </div>
</template>

<script>
var reg = new RegExp( // 校验手机号
  '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$'
)
// var reg2 = new RegExp(/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g);  // 社会信用代码

import { cityList } from '../configs/cityList'
import Tip from '@/views/backstageSupport/components/common/tip.vue'
const baseUrl = process.env.VUE_APP_BASE_URL
import { getStorage } from '@/utils/index'
import { companyAuth } from '@/api/accountInfos'

export default {
  props: {
    registerForm: Object
  },
  data() {
    return {
      cityList,
      loading: false,
      isEmpty: false,
      title: '企业用户注册资料认证',
      tip: '温馨提示：欢迎您升级企业用户！请认真填写以下信息，一旦提交，不可更改',
      url: baseUrl + '/system/file/pop',
      params: {
        enpName: '',
        enpNo: '',
        enpType: '',
        enpUrl: '',
        enpDate: '',
        province: '',
        city: '',
        area: '',
        enpPhone: '',
        enpAddress: '',
        enpContact: '',
        enpEmail: '',
        enpDesc: '',
        enpPic: '',
        logo: '',
        adress: []
      },
      rules: {
        enpName: [
          { required: false, message: '请输入企业名称不能为空!', trigger: 'blur' }
        ],
        // enpType: [
        //   { required: false, message: '企业类型不能为空!', trigger: 'blur' }
        // ],
        adress: [
          { required: true, message: '所在区域不能为空!', trigger: 'blur' }
        ],
        enpAddress: [
          { required: true, message: '详细地址不能为空!', trigger: 'blur' }
        ],
        enpPhone: [
          { required: true, message: '联系电话不能为空!', trigger: 'blur' },
          {
            validator: (rule, val, callback) => {
              if (!reg.test(val)) {
                callback(new Error('请输入正确的手机号码!'))
              } else {
                callback()
              }
            }
          }
        ],
        enpContact: [
          { required: true, message: '联系姓名不能为空!', trigger: 'blur' }
        ],
        enpPic: [
          { required: true, message: '营业执照不能为空!', trigger: 'blur' }
        ],
        //营业执照号码
        enpNo: [
          { required: true, message: '统一社会信用代码不能为空!', trigger: 'blur' },
          // {
          //   validator: (rule, val, callback) => {
          //     if (!reg2.test(val)) {
          //       callback(new Error('请输入正确统一社会信用代码!'))
          //     } else {
          //       callback()
          //     }
          //   }
          // }
        ],
      },
      addressWrapper: { span: 20 },
      typeWrapper: { span: 20 },
      wrapper: { span: 4 },
      layout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 8 }
      },
      headers: {}, // 请求头的参数
      fileList: [], // 上传结果
      logoFileList: [], //logo上传结果
      uploadTypeMap:
        'bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng,jpeg', // 请求的限制条件
    }
  },
  components: {
    Tip
  },
  mounted() {
    const token = `${getStorage('token', 0)}`
    this.headers = {
      Authorization: token,
    }
    this.initSetting()
  },
  methods: {
    timeChange(i, e) {
      this.params.enpDate = e
    },
    handlerBeforeUpload(file) {
      const { name } = file
      const type = name.split('.').slice(-1)
      if (this.logoFileList.length >= 1) {
        this.$apiStatusHandler(99, '图片上传不能超过1个')
        return Promise.reject()
      }
      if (this.uploadTypeMap.indexOf(type) === -1) {
        this.$apiStatusHandler(99, '上传的附件类型不符合要求')
        return Promise.reject()
      }
    },
    draggerBeforeUpload(file) {
      const { name } = file
      const type = name.split('.').slice(-1)
      if (this.fileList.length >= 1) {
        this.$apiStatusHandler(99, '图片上传不能超过1个')
        return Promise.reject()
      }
      if (this.uploadTypeMap.indexOf(type) === -1) {
        this.$apiStatusHandler(99, '上传的附件类型不符合要求')
        return Promise.reject()
      }
    },
    //所在区域选择事件
    onChange(value) {
      this.params.province = value[0]
      this.params.city = value[1]
      this.params.area = value[2]
    },
    uploadHandleChange(info) {
      const { fileList } = info
      this.logoFileList = fileList
      this.params.logo = this.logoFileList[0].response && this.logoFileList[0].response.data[0].filePath
    },
    draggerHandleChange(info) {
      const { fileList } = info
      this.fileList = fileList
      this.params.enpPic = this.fileList[0].response && this.fileList[0].response.data[0].filePath //done的前两个状态取不到response
    },
    initSetting() {
      const { email } = this.$route.query
      this.params.enpEmail = email
    },
    confirmClick() {
      let isBreak = false
      const mustArr = ['enpName', 'enpNo', 'enpType', 'adress', 'enpPhone', 'enpContact', 'enpPic']
      for (let key in this.params) {
        if (mustArr.indexOf(key) !== -1) {
          if (this.params[key] === '' && !isBreak) {
            isBreak = true
            this.$message.warning('请完善信息!')
            return
          }
        }
      }
      Reflect.deleteProperty(this.params, 'adress')  //删除adress属性
      companyAuth(this.params).then(res => {
        if (res.code === 200) {
          this.$message.success('认证成功!')
          this.$router.push({ name: 'platformPortal' })
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    //联系客服
    contact() { },
  },
}
</script>

<style lang="scss" scoped>
.btn-item {
  height: 25px;
}
::v-deep .ant-radio-inner::after {
  //重写radio选中的样式
  background-color: #2d5acb;
}

::v-deep .ant-radio-checked .ant-radio-inner {
  border-color: #2d5acb;
}
</style>